<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>小区列表</title>
<style type="text/css">
#ta th, td {
	text-align: center;
	line-height: 26px;
	border-color: #A1A7FF;
}

#ta tr:nth-child(odd) {
	background: #F4F4F4;
}

.ta-1 {
	margin: auto;
	width: 250px;
	text-align: center;
}

.ta-1 a {
	padding: 5px;
	background-color: #9bcdff;
	color: #fff;
}

#myModal1 dt, dd {
	float: left;
}

#myModal1 dl, dd {
	margin-left: 10px;
}

#myModal1 dd {
	width: 300px;
	line-height: 40px;
	height: 40px;
}

#myModal1 dl {
	width: 650px;
}

#dk {
	margin-left: 50px;
	margin-top: 20px;
	font-size: 14px;
}

#dk tr td input {
	margin-top: 10px;
}

#dk tr td select {
	width: 160px;
	height: 30px;
	margin-top: 10px;
}

.sub  input {
	margin-top: 25px;
	margin-left: 150px;
}

#table1 td:FIRST-CHILD {
	text-align: right;
}

#table1 td:nth-child(2) {
	text-align: left;
}

#table1 td:nth-child(2) input, select {
	width: 160px;
}

#table1 {
	margin-left: 160px;
}
#table1 tr td:nth-child(3){
	color: red;
}
</style>
<script type="text/javascript">
$(function(){
	$("#name").blur(checkname);
	$("#securityPhone").blur(checkphone);
	$("#btn").click(function(){
		var flag=true;
		if(!checkname()){
			flag=false;
		}
		if(!checkphone()){
			flag=false;
		}
		if(flag==true){
			$("#sub").submit();
		}
	});
});

function checkname(){
$("#DIVName").html("");
if($("#name").val()==""){
	$("#DIVName").html("小区名不能为空");
	return false;
}
return true;
}	

function checkphone(){

var reg=/^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/;

$("#DIVPhone").html("");

if($("#securityPhone").val()==""){
	$("#DIVPhone").html("安保电话不能为空");
	return false;
}

if(!reg.test($("#securityPhone").val())){
	$("#DIVPhone").html("格式不正确");
	return false;
}

return true;

}
	
	
	
function getAddress(addressId){
	

	$.ajax({
		type:"post",
		data:{id:addressId},
		url:"/property/address/getAddress",
		dataType : "text",
		success : function(data) {
			if(data!=null&&data!=""){
				$("#address").text(data);
			}
		},
		error : function() {
			alert("加载失败");
		}
	})
}

function queryInfo(id){
	var logo=$("#logo").attr("src");
	$.ajax({
		type:"post",
		data:{id:id},
		url:"/property/admin/getCommunityById",
		dataType : "json",
		success : function(data) {
			if(data!=null&&data!=""){
				$("#title").text(data.community.communityName);
				//$("#address").text(data.community.provCityDistId);
				logo="${initParam.url}/statics"+data.community.communityImg;
				$("#hre").attr("href",logo);
				$("#logo").attr("src",logo);//图片位置
				$("#phone").text(data.community.securityPhone);
				$("#mphone").text(data.phone);
				getAddress(data.community.provCityDistId);
			}
		},
		error : function() {
			alert("加载失败");
		}
	})
	//alert(id);
	$("#myModal1").modal();
}
	/*加载省下拉选*/
	$(function() {
		
		$.ajax({
			type : "post",
			url : "/property/address/getProvince",
			dataType : "json",
			success : function(data) {
				for (var i = 0; i < data.length; i++) {
					$('#province_code').append(
							"<option value='" + data[i].id + "' >"
									+ data[i].province + "</option>");
				}
			},

			error : function() {
				alert("加载省失败");
			}
		});
	});
	/*加载市下拉选*/
	function getCity() {
		var id = $("#province_code").val();
		$("#city_code").empty();
		$("#area_code").empty();
		$.ajax({
			type : "post",
			url : "/property/address/getCity",
			data : {
				"id" : id
			},
			dataType : "json",
			success : function(data) {
				$('#city_code').append(
						"<option value='' selected='selected' >" + '———市———'
								+ "</option>");
				$('#area_code').append(
						"<option value='' selected='selected' >" + '———区———'
								+ "</option>");
				for (var i = 0; i < data.length; i++) {
					$('#city_code').append(
							"<option value='" + data[i].id + "' >"
									+ data[i].city + "</option>");
				}
			},
			error : function() {
				alert("加载市失败");
			}
		});
	};
	/*加载地区下拉选*/
	function getArea() {
		var id = $("#city_code").val();
		$("#area_code").empty();
		$.ajax({
			type : "post",
			url : "/property/address/getArea",
			data : {
				"id" : id
			},
			dataType : "json",
			success : function(data) {
				$('#area_code').append(
						"<option value='' selected='selected' >" + '———区———'
								+ "</option>");
				for (var i = 0; i < data.length; i++) {
					$('#area_code').append(
							"<option value='" + data[i].id + "' >"
									+ data[i].district + "</option>");
				}
			},
			error : function() {
				alert("加载区失败");
			}
		});
	}
	
	function getComId(id) {
		$('#table1').empty();
		$.ajax({
			type:"post",
			url:"/property/admin/getComId",
			data:{"id":id},
			datatype:"json",
			success:function (data){
				$('#table1').append("<tr><td><input type='hidden' name='id' value='"+data.id+"'/></td></tr>");
				$('#table1').append("<tr><td>小区名字：</td><td><input type='text' value='"+data.communityName+"' name='communityName' id='name' onblur='checkname()'/></td><td id='DIVName'></td></tr><tr><td>安保电话：</td><td><input type='text' value='"+data.securityPhone+"' name='securityPhone' id='securityPhone' onblur='checkphone()'/></td><td id='DIVPhone'></td></tr>");
				if(data.status=="未审核"){
				$('#table1').append("<tr><td>状态：</td><td><select name='status'><option value='未审核' selected='selected' >未审核</option><option value='已审核'>已审核</option><option value='审核中'>审核中</option></select></td></tr>");				
			}
				if(data.status=="已审核"){
					$('#table1').append("<tr><td>状态：</td><td><select name='status'><option value='未审核'  >未审核</option><option value='已审核' selected='selected'>已审核</option><option value='审核中'>审核中</option></select></td></tr>");				
				}
				if(data.status=="审核中"){
					$('#table1').append("<tr><td>状态：</td><td><select name='status'><option value='未审核'  >未审核</option><option value='已审核'>已审核</option><option value='审核中' selected='selected'>审核中</option></select></td></tr>");				
				}
				$('#table1').append("<tr><td>小区图片：</td><td><input type='file' name='file' class='file'/></td></tr>");
				img();
				$("#my2").modal();
			},
			error:function(){
				alert("加载失败！")
			}
		})
	}
	function img() {
		//预览图片
		$(".file").change(function() {
			
			$(".imgs").attr("src", URL.createObjectURL($(this)[0].files[0]));
		});
	}
</script>
</head>
<body>
	<div
		style="width: 1100px; height: 500px; background-color: #FFF; margin: 20px; color: #000;">

		<form action="communityList" id="query">
			<h4
				style="background-color: #9FB2C2; padding-left: 10px; color: #516D8A; line-height: 40px;">
				<img alt="" src="${initParam.url}/statics/images/title.jpg">
				小区列表
			</h4>
			<div
				style="width: 1050px; margin: 0px auto; line-height: 30px; background-color: #E6E6E6; padding-left: 5px;">
				<select class="select" id="province_code" name="province_code"
					onchange="getCity()">
					<option value="">———省———</option>
				</select> <select class="select" id="city_code" name="city_code"
					onchange="getArea()">
					<option value="">———市———</option>
				</select> <select class="select" id="area_code" name="area_code">
					<option value="">———区———</option>
				</select>

				<div style="float: right;">
					关键字：<input type="text" name="cname" style="height: 20px" /> <a
						href="javascript:void(0);" onclick="document:query.submit()">查询</a>
				</div>
			</div>

			<div style="width: 1050px; margin: 5px auto;">
				<table border="1" style="width: 1050px; border-color: #A1A7FF;"
					id="ta">
					<tr>
						<th width="60">序号</th>
						<th width="120">物管用户名</th>
						<th width="120">物管电话</th>
						<th width="120">安保电话</th>
						<th width="120">小区名</th>
						<th width="150">小区地址</th>
						<th width="120">状态</th>
						<th width="150">操作</th>
					</tr>
					<c:forEach var="community" items="${communitys }">
						<tr>
							<td>${community.community.id }</td>
							<td><c:if test="${community.user.userName!=null }">${community.user.userName }</c:if>
								<c:if
									test='${community.user.userName==null || community.user.userName=="" }'>暂无</c:if>
							</td>
							<td><c:if test="${community.phone !=null}">${community.phone}</c:if>
								<c:if test='${community.phone ==null || community.phone=="" }'>暂无</c:if>
							</td>
							<td>${community.community.securityPhone}</td>
							<td>${community.community.communityName}</td>
							<td><c:forEach var="dist" items="${distList }">
									<c:if test="${dist.id== community.community.provCityDistId}">
										<c:forEach var="city" items="${cityList }">
											<c:if test="${city.id==dist.city_id}">
												<c:forEach var="prov" items="${provList }">
													<c:if test="${prov.id==city.province_id}">
												${prov.province}&nbsp;
											</c:if>
												</c:forEach>
										${city.city }&nbsp;
									</c:if>
										</c:forEach>
								${dist.district }
							</c:if>
								</c:forEach></td>
							<td>${community.community.status}</td>

							<td><a href='javascript:void(0);'
								onclick="queryInfo(${community.id})">查看详情</a>&nbsp;|&nbsp;<a
								href='javascript:void(0);' onclick="getComId(${community.id})">修改</a>&nbsp;|&nbsp;<a
								href="${initParam.url }/admin/delCommunity?id=${community.id}">删除</a></td>
						</tr>
					</c:forEach>
				</table>
			</div>

			<div class="modal fade" id="myModal1" tabindex="-1" role="dialog"
				aria-labelledby="myModalLabel"
				style="width: 600px; height: 350px; background-color: #FFF; margin: auto; padding-top: 0px;">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">×</span>
					</button>
					<h4 class="modal-title" id="myModalLabel">小区详情</h4>
					<div>
						<dl>
							<dt style="padding: 3px; background-color: #C2C2C2;">

								<img id="logo" alt="" src="${initParam.url }" width="240px"
									height="220px" />

							</dt>
							<dd style="padding-left: 100px;">
								<h3 id="title">测试小区</h3>
							</dd>
							<dd style="padding-left: 10px; margin-top: 10px;">
								小区地址： <label id="address"> </label>
							</dd>
							<dd style="padding-left: 10px;">
								保安处电话：<label id="phone">1231231231231</label>
							</dd>
							<dd style="padding-left: 10px;">
								物管电话：<label id="mphone">1231321213123</label>
							</dd>
						</dl>
					</div>
				</div>
			</div>
			<div class="ta-1">
				<c:if test="${page<2 }">
					<a href="#">第一页</a>
				</c:if>
				<c:if test="${page>1 }">
					<a
						href="?page=1&addressType=${param.addressType }&province_code=${param.province_code}&city_code=${param.city_code}&area_code=${param.area_code}&cname=${param.cname}">第一页</a>
				</c:if>
				<c:if test="${page<2 }">
					<a href="#">上一页</a>
				</c:if>
				<c:if test="${index>1 }">
					<a
						href="?page=${page-1 }&addressType=${param.addressType }&province_code=${param.province_code}&city_code=${param.city_code}&area_code=${param.area_code}&cname=${param.cname}">上一页</a>
				</c:if>
				<c:if test="${page<count }">
					<a
						href="?page=${page+1}&addressType=${param.addressType }&province_code=${param.province_code}&city_code=${param.city_code}&area_code=${param.area_code}&cname=${param.cname}">下一页</a>
				</c:if>
				<c:if test="${page==count }">
					<a href="#">下一页</a>
				</c:if>
				<c:if test="${page==count }">
					<a href="#">最后一页</a>
				</c:if>
				<c:if test="${count>page }">
					<a
						href="?page=${count }&addressType=${param.addressType }&province_code=${param.province_code}&city_code=${param.city_code}&area_code=${param.area_code}&cname=${param.cname}">最后一页</a>
				</c:if>
			</div>
		</form>
	</div>

	<div class="modal fade" id="my2" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel"
		style="width: 600px; height: 350px; background-color: #FFF; margin: auto; padding-top: 0px;">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal"
				aria-label="Close">
				<span aria-hidden="true">×</span>
			</button>
			<h4 class="modal-title" id="myModalLabel">修改小区信息</h4>
			<div></div>

		</div>
		<div id="dk">
			<form action="updateCom" method="post" enctype="multipart/form-data"
				id="sub">
				<table id="table1">

				</table>
				<div class="sub">
					<input type="button" id="btn" class="btn btn-default" value="确定修改">
				</div>

				<div style="position: absolute; right: 420px; bottom: 100px;">
					<p style="text-align: center;">预览：</p>
					<img class="imgs" src=""
						onerror="this.src='${initParam.url }/statics/images/暂无图片.jpg'"
						style="width: 140px; height: 160px; padding: 3px; background-color: gray;">
				</div>
			</form>
		</div>

	</div>
</body>
</html>